<template>

  <body style="background-color:rgb(241, 253, 251);">
    <tt></tt>

    <div>
      <div style="margin: 0 auto;width:80%;font-size:40px;margin-top:20px;margin-buttom:20px;">
        确认订单 &nbsp
        <span style="font-size:20px;color:grey">请在30分钟内完成支付，否则订单会被自动取消</span>
        <el-button round>返回</el-button>
      </div>
      <br>

      <div style="height:150px;width:80%;background-color:white;margin: 0 auto;padding:20px">
        <span style="font-size:20px">
          <!-- 需插入用户信息：并插入头像、名字、钱包 -->
          <img src="../../assets/images/ll.jpg"
               style="height:150px;border-radius: 50%;float:left">
          <br>
          <b style="margin:20px;font-size:25px">隔壁吴老二</b>
          <br>
          <br>
          &nbsp 我的钱包：<b style="color:red">￥6580</b>

        </span>
        <el-button type="warning"
                   round
                   style="float:right;background-color:orange;font-size:20px">去充值</el-button>
      </div>
      <br>

      <div style="height:800px;width:80%;background-color:white;margin: 0 auto;padding:20px">
        <p style="font-size:25px">订单信息</p>
        <!-- 查询当前课程信息然后展示 -->
        <img src="../../assets/images/u703.png"
             style="width:300px;float:left">
        <br>
        <br>
        &nbsp
        &nbsp

        <b style="font-size:30px">《{{course.name}}》</b>

        <p style="font-size:20px;margin:20px">&nbsp &nbsp 共{{chapters.length}}章</p>

        <p>&nbsp &nbsp 授课人：{{teacher.realname}}</p>

        <b style="color:red;float:right;font-size:30px">￥{{course.price}}</b>
        <br>
        <br>
        <hr>
        <p style="font-size:30px;float:right">原价：{{course.price}}</p><br><br><br><br><br>
        <p style="font-size:30px;float:right">优惠：暂无</p><br><br><br><br><br>
        <p style="font-size:30px;color:red;float:right">实付：{{course.price}}</p>
        <br><br><br><br><br><br>
        <br>
        <el-button type="danger"
                   round
                   style="float:right;background-color:orange;font-size:30px">立即支付</el-button>
        <br>
        <br>
        &nbsp<el-radio v-model="radio"
                  label="1">我已同意多项霸王条款</el-radio>

      </div>

      <br>
      <br>
    </div>
    <ww></ww>
  </body>
</template>

<script>
import tt from "./tt.vue"
import ww from "./ww.vue"
export default {
  components: {
    tt: tt
  },
  data () {
    return {
      course: [],
      chapters: [],
      sections: [],
      teacher: [],
      references: [],
      assessment: [],
      school: [],
      activeNames: ['1'],
      radio: '1'
    }
  },
  methods: {
    handleChange (val) {
      console.log(val);
    }
  }, components: {
    tt: tt,
    ww: ww,
  },

  created () {
    //   查询要展示的课程
    this.axios.get(this.baseUrl + "course/findcoursebyid?id=5001")
      .then(res => {
        console.log(res.data.data);
        this.course = res.data.data;
      })



    // 通过当前课程id查询参考书目
    {
      this.axios.get(this.baseUrl + "course/findreferencesbycourseid", this.course)
        .then(res => {
          this.references = res.data.data;
        })
    }




  },
  watch: {
    course: {  //深度监听course对象
      handler (val, oldVal) {
        // 通过当前课程查询教师
        this.findTeacher();
        this.findChapter();
        this.findAssessment();
      }
    },
    teacher: {
      handler (val, oldVal) {
        this.findSchool();
      }
    }
  },
  methods: {
    findTeacher () {    //通过课程查询老师
      this.axios.post(this.baseUrl + "course/findteacherbycourse", this.course)
        .then(res => {
          this.teacher = res.data.data;
        })
    },
    findChapter ()       // 通过当前课程的查询章节
    {
      this.axios.post(this.baseUrl + "course/findchaptersbycourse", this.course)
        .then(res => {
          this.chapters = res.data.data;
        })
    },
    findAssessment ()// 通过当前课程id查询考核标准
    {
      this.axios.post(this.baseUrl + "course/findassessmentbyid", this.course)
        .then(res => {
          this.assessment = res.data.data;
        })
    },
    findSchool ()// 通过当前教师id查询学校
    {
      this.axios.post(this.baseUrl + "teacher/findschoolbyteacherid", this.teacher)
        .then(res => {
          this.school = res.data.data;
        })
    }
  }

}
</script>

<style>
a {
  text-decoration: none;
}
.wei {
  color: aliceblue;
  font-size: 22px;
  margin: 50px;
}
.wei1 {
  color: white;
  font-size: 18px;
  margin-left: 160px;
  color: rgb(241, 253, 251);
}
</style>